<template>
  <div>
    <div class="collegeIntro">
      <div class="top">
        <div class="left">
          <h2><span>{{collegeList.name}}</span>介绍</h2>
          <el-card class="college">
            <el-card
              style="display: inline-block; width: 180px; height: 100px; padding: 0"
            >
              <div class="import">
                <img src="@/assets/collegeIntro/博士点.png" alt="" />
                <h4>博士点</h4>
              </div>
              <div class="num">{{collegeList.doctorNum}}</div>
            </el-card>
            <el-card
              style="display: inline-block; width: 180px; height: 100px; padding: 0"
            >
              <div class="import">
                <img src="@/assets/collegeIntro/硕士点.png" alt="" />
                <h4>硕士点</h4>
              </div>
              <div class="num" style="color: rgba(0, 122, 255)">{{collegeList.masterNum}}</div>
            </el-card>
            <el-card
              style="display: inline-block; width: 180px; height: 100px; padding: 0"
            >
              <div class="import">
                <img src="@/assets/collegeIntro/重点学科.png" alt="" />
                <h4 style="display: inline-block; width: 80px; margin-left: -10px">
                  重点学科
                </h4>
              </div>
              <div class="num" style="color: rgba(255, 102, 2)">{{collegeList.subjectNum}}</div>
            </el-card>
            <el-card
              style="display: inline-block; width: 180px; height: 100px; padding: 0"
            >
              <div class="import">
                <img src="@/assets/collegeIntro/重点实验室.png" alt="" />
                <h4 style="display: inline-block; width: 80px; margin-left: -15px">
                  重点实验室
                </h4>
              </div>
              <div class="num" style="color: rgba(0, 182, 142)">{{collegeList.labNum}}</div>
            </el-card>
            <el-card style="width: 97.5%; margin-top: 10px;height:110px">
              <ul class="item_bottom_content clearfix">
                <li class="item_bottom_li clearfix">
                  <img src="../../../assets/collegeIntro/创建时间.png"
                    class="block-icon float_l img1"
                  ></img
                  ><span class="ellipsis float_l" style="width: 170px">
                    创建时间：
                    <span style="width:38px;">{{collegeList.createTime}}</span><span style="width:20px">年</span></span
                  >
                  <img src="../../../assets/collegeIntro/占地面积.png"
                    class="block-icon float_l"
                    style="
                      margin-left: 50px;
                    "
                  ></img
                  ><span class="ellipsis float_l" style="width: 170px"
                    >占地面积（亩）：<span>{{collegeList.areaCover}}</span></span
                  >
                </li>
                <li class="item_bottom_li clearfix">
                  <img src="../../../assets/collegeIntro/学校地址.png"
                    class="block-icon float_l"
                  ></img
                  ><span
                    class="ellipsis float_l"
                    style="word-break: break-all; white-space: normal; width: 95%"
                    >学校地址：<span>{{collegeList.address}}</span></span
                  >
                </li>
              </ul>
            </el-card>
            <el-card style="width: 97.5%; margin-top: 10px;">
                <span class="school_introduce_text_item">
                  {{collegeList.introduce}}
                  <router-link to="/collegeIntroduction/introDetails" class="school_introduce_text_more cursor" style="">更多&gt;</router-link>
                  </span>
            </el-card>
          </el-card>
        </div>
        <div class="right">
          <h2><span>分数相近院校推荐</span></h2>
          <div style="width:100%;height:40px;line-height:40px;margin-left:10px;margin-top:10px"> 
            <span>根据2020</span>
            <div style="display:inline-block">
              
              <el-form :inline="true" :model="infoForm">
                <el-form-item>
                  <el-select
                    v-model="infoForm.type"
                    placeholder="科目"
                    style="width: 80px;height: 30px;"
                    @change="changeType"
                  >
                    <el-option
                      v-for="(item, index) in typeList"
                      :label="item.value"
                      :value="item.value"
                      :key="index"  
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <span>普通类录取分数为基准</span>
          </div>
          <el-card style="margin-top:10px;margin-left:10px">
            <div class="right_item" v-for="(item,index) in recomCollegeList" :key="index" @mouseover="changeBig(index)">
              <div class="image" :style="{width:change !== index ? '20px' : '50px'}"><img :src="item.logo" alt=""></div>
              <div class="info">
                <div class="infoName" @click="replace(item.unvid)" :style="{fontSize:change !== index ? '14px' :'16px'}">{{item.name}}</div>
                <span :style="{display:change !== index ? 'none' :'block'}" class="infoBottom">
                  <span>{{item.type}}</span>
                  <span>{{item.adminssionbatch}} </span>
                  <span><span>{{item.score}}</span>分</span>
                </span>
              </div>
            </div>
            
          </el-card>
        </div>
      </div>
      <h2 style="display:block;margin-top:20px;">开设专业</h2>
      <el-card class="major">
        <el-card class="major_info_item1">
          <table class="both_heigh_table">
            <tbody>
              <tr>
                <th>国家特色专业</th>
                <th>
                  <span v-for="(item,index) in tsMajorList" class="majorStyle">
                    {{item.name}}
                  </span>
                </th>
              </tr>
            </tbody>
          </table>
        </el-card>
        <el-card class="major_item2">
          <table>
            <thead>
              <tr>
                <th>类别</th>
                <th>专业</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in majorList" :key="index">
                <td>{{item.name}}</td>
                <td><span class="major_item" v-for="(major,majorIndex) in item.list" :key="majorIndex">{{major.name}}</span></td>
              </tr>
            </tbody>
          </table>
        </el-card>
      </el-card>
    </div>
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      timer: 0,
      // 手风琴
      change: 0,
      // 分数相近 文理科
      infoForm: {
        type: "",
      },
      collegeList: {
        unvId: "",
        name: "",
        // 官方网址
        officialSite: "",
        // 官方电话
        phoneNumber: "",
        // 官方邮箱
        schoolEmail: "",
        // 学校详细地址
        address: "",
        // 博士点数量
        doctornum: "",
        // 硕士点数量
        masterNum: "",
        // 国家重点学科数量
        subjectNum: "",
        // 国家重点实验室数量
        labNum: "",
        // 学校创建时间
        createTime: "",
        // 覆盖面积
        areaCover: "",
        // 校友会排名
        xyhRank: "1",
        feature: "",
        province: "",
        code: "",
        category: "",
        logo: "",
        is985: "",
        is211: "",
        type: "",
        heat: null,
        introduce:
          "厦门大学（Xiamen University），简称厦大 ，由著名爱国华侨领袖陈嘉庚先生于1921年创办, 是中国近代教育史上第一所华侨创办的大学，也是国家“211工程” 和“985工程”重点建设的高水平大学。2017年，厦门大学入选国家公布的 A 类世界一流大学建设高校名单。建校以来, 学校秉承“自强不息, 止于至善”的校训，积累了丰富的办学经验, 形成了鲜明的办学特色，成为一所学科门类齐全、师资力量雄厚、居国内一流、在国际上有广泛影响力的综合性大学。建校迄今，学校已先后为国家培养了40多万名本科生和研究生，在厦大学习、工作过的两院院士达60多人。学校设有研究生院、6个学部以及30个学院和16个研究院，形成了包括人文科学、社会科学、自然科学、工程与技术科学、管理科学、艺术科学、医学科学等学科门类在内的完备学科体系。学校现有18个学科进",
      },
      tsMajorList: [
        {
          heat: null,
          name: "",
          majorid: null,
        },
      ],
      majorList: [
        {
          name: "哲学类(本)",
          list: [
            {
              name: "哲学",
            },
            {
              name: "宗教学",
            },
            {
              name: "逻辑学",
            },
          ],
        },
      ],
      recomCollegeList: [],
      typeList: [
        {
          value: "理科",
        },
        {
          value: "文科",
        },
      ],
    };
  },
  methods: {
    // 手风琴效果
    changeBig(index) {
      this.change = index;
      console.log(this.change);
    },
    // 修改文理科
    changeType() {
      this.$axios
        .post(
          "/similarUniversity",
          qs.stringify({
            unvId: this.$route.params.id,
            year: 2020,
            type: this.infoForm.type,
          })
        )
        .then((res) => {
          console.log(res);
          this.recomCollegeList = res.data;
        });
    },
    replace(unvid) {
      console.log(unvid);
      this.$router.replace({
        name: "college",
        params: { id: unvid },
      });
    },
  },
  created() {
    console.log(this.$route.params.id);
    this.infoForm.type = this.typeList[0].value;
    let unvId = this.$route.params.id;
    this.$axios.get("/university/" + unvId).then((res) => {
      this.collegeList = res.data;
    });
    this.$axios
      .post(
        "/similarUniversity",
        qs.stringify({
          unvId: this.$route.params.id,
          year: 2020,
          type: this.infoForm.type,
        })
      )
      .then((res) => {
        console.log(res);
        this.recomCollegeList = res.data;
      });
    this.$axios.get("/universityMajor/" + this.$route.params.id).then((res) => {
      console.log(res);
      let majorList = [];
      for (let index = 0; index < 10; index++) {
        majorList.push(res.data[index]);
      }
      this.majorList = majorList;
      console.log("@", this.majorList);
    });
    this.$axios.get("/nationalMajor/" + this.$route.params.id).then((res) => {
      console.log(res);
      this.tsMajorList = res.data;
    });
  },
  beforeDestroy() {
    clearInterval(this.change);
  },
};
</script>

<style scoped>
li {
  list-style: none;
}

h2 {
  font-size: 20px;
  font-weight: 700;
}

.collegeIntro {
  font-size: 16px;
  margin-top: 3.3vh;
}
.collegeIntro h2 {
  display: block;
  margin-left: 1.5vw;
}

.top {
  display: flex;
}

.right {
  margin-left: 2.7vw;
}

.right_item {
  width: 20.8vw;
  display: flex;
  margin-bottom: 3.3vh;
}

.image {
  width: 3.7vw;
}
.image img {
  width: 100%;
}

.info {
  margin-left: 0.7vw;
}

.info {
  margin-bottom: 0.8vh;
}

.infoName:hover {
  color: rgba(255, 101, 0);
  cursor: pointer;
}

.infoBottom {
  margin-top: 1.3vw;
  font-size: 14px;
  color: rgba(255, 101, 0);
}

.collegeIntro .import {
  float: left;
  width: 3.7vw;
  margin-left: 0.7vw;
}

.collegeIntro .college .num {
  float: left;
  width: 3.7vw;
  height: 8.1vh;
  line-height: 8.1vh;
  text-align: center;
  margin-left: 1.5vw;
  color: rgba(255, 21, 21);
  font-weight: bold;
  font-size: 24px;
}

.college {
  width: 59.3vw;
  height: 76.4vh;
  margin-top: 1.6vh;
  border-radius: 10px;
  margin-left: 0.7vw;
}

.item_bottom_content {
  font-size: 14px;
  font-weight: 400;
  color: #888;
  margin-bottom: 0;
}

.clearfix {
  zoom: 1;
}

.item_bottom_content .item_bottom_li {
  margin: 0 2.2vw 4.9vh 0;
  height: 2.9vh;
  line-height: 2.9vh;
}

.block-icon {
  display: inline-block;
  width: 1.3vw;
  height: 2.9vh;
  line-height: 2.9vh;
  margin-right: 0.4vw;
  position: relative;
  background-size: 100% 100% !important;
}

.float_l {
  float: left;
}

.item_bottom_li span {
  display: inline-block;
  width: 20.4vw;
  font-size: 14px;
  color: #000000;
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
}

.school_introduce_text_item {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  width: 51.9vw;
  line-height: 3.6vh;
  font-size: 14px;
  font-weight: 400;
  color: #000000;
  word-break: break-all;
}

.school_introduce_text_item a {
  color: rgba(255, 101, 0);
  margin-left: 0.1vw;
}

.cursor {
  cursor: pointer;
}

.major {
  width: 98%;
  margin-left: 0.7vw;
  margin-top: 1.6vh;
  margin-bottom: 1.6vh;
}

.major_item1 {
  display: flex;
  margin: 1.6vh 0.4vw;
}

.major_info_item1 {
  height: auto;
  border: none;
  width: 100%;
  color: #333;
}

.major_info_item1 table {
  width: 100%;
  padding: 0 3.2vw 0 3.5vw;
  overflow: hidden;
}

.major_info_item1 table tr {
  border: 1px solid #ededed;
  height: 7.5vh;
  line-height: 7.5vh;
  text-align: center;
}

.major_info_item1 .both_heigh_table th {
  vertical-align: middle;
  padding: 1.6vh 0.7vw;
  color: #000000;
  font-size: 14px;
}

.major_info_item1 table tr th:first-child {
  width: 26.5vw;
  border-right: 1px solid #ededed;
}

.both_heigh_table th:last-child {
  line-height: 4.9vh;
  text-align: left;
}

.major_item1 div:first-child {
  width: 30%;
  text-align: center;
}

.major_item1 div:nth-child(2) {
  width: 0.1vw;
  background-color: #999;
}

.major_item1 div:last-child {
  margin-left: 1.5vw;
  width: 65%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

.majorStyle {
  display: inline-block;
  font-size: 14px;
  padding: 0.8vh 0.7vw;
  margin-left: 0.7vw;
  margin-bottom: 2.4vh;
  height: 4.9vh;
  line-height: 4.9vh;
  text-align: center;
  border: 1px solid rgba(215, 215, 215);
  border-radius: 5px;
}

.majorStyle:hover {
  cursor: pointer;
  color: rgba(255, 101, 0);
}

.major_item2 {
  padding: 0;
  margin-left: 0.4vw;
  margin-top: 3.3vh;
}

table {
  width: 100%;
  padding: 0 3.2vw 0 3.5vw;
  overflow: hidden;
  border-collapse: collapse;
  border-spacing: 0;
}

table tr {
  border: 1px solid #ededed;
  height: 7.5vh;
  line-height: 7.5vh;
  text-align: center;
}

tr th:first-child {
  width: 25.9vw;
  border-right: 1px solid #ededed;
}
tr th {
  font-size: 16px;
  font-weight: 400;
  color: #888;
  vertical-align: middle;
  padding: 1.6vh 0.7vw;
  text-align: center;
}

table tr td:first-child {
  width: 13.5vw;
  border-right: 1px solid #ededed;
  text-align: center;
}
table tr td {
  font-size: 14px;
  color: #000000;
  vertical-align: middle;
  padding: 1.6vh 0.7vw;
  text-align: left;
}

.major_item {
  width: auto;
  float: left;
  margin: 0 0.7vw;
}
</style>